<template>
	<uni-popup title="选择标签" ref="label" type="bottom" background-color="white">
		<view class="label-dialog">
			<view class="title">
				选择标签
				<uni-icons @click="close" class="close" type="close" color="gray" size="24" />
			</view>
			<!-- <view class="checkbox-group">
				<view class="checkitem" v-for="(item,index) in list" :key="index">
					<view></view>
				</view>
			</view> -->
			<view class="checkbox-group">
				<view @click="changeCheck(index)" :class="{
			                    select: item.check
			                }" class="checkbox" v-for="(item, index) in data_list">
					{{ item.major_name }}
				</view>
			</view>
			<!-- <view class="checkbox-group">
                <view @click="changeCheck(item,index)" v-for="(item, index) in list" :key="index">
                    <view  class="checkbox" :style="{
                    'background': item.check==true?'#FF8A9B':'','color': item.check==true?'#FFF':''
                }">{{ item.major_name }}</view>
                </view>
            </view> -->
			<view style="height: 120rpx;"></view>
			<view class="confirm-button" @click="handlelabel()">
				<view>确定</view>
			</view>
		</view>

	</uni-popup>
</template>
<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				data_list: [{
						label: '党员',
						value: 1,
						check: false
					},
					{
						label: '医生',
						value: 2,
						check: false
					},
				]
			}
		},
		watch: {
			list() {
				this.data_list = this.list
				this.data_list.forEach(item => {
					item.check = false
				})
			}
		},
		methods: {
			changeCheck(index) {
				this.data_list[index].check = !this.data_list[index].check
				this.data_list = [...[], ...this.data_list]
			},
			handlelabel() {
				const c = this.data_list.every(item => item.check == false)
				if (c == false) {
					this.$emit('handlelabel', this.data_list)
					this.close()
				} else {
					uni.showToast({
						title: '请选择标签',
						icon: 'none'
					})
				}
			},
			open() {

				console.log('open', this.list)
				this.$refs.label.open()
			},
			close() {
				this.$refs.label.close()
			}
		}
	}
</script>
<style lang="scss">
	.label-dialog {
		padding-bottom: env(safe-area-inset-bottom);

		.title {
			position: relative;
			display: flex;
			justify-content: center;
			padding: 30rpx;
			font-size: 40rpx;
			border-bottom: 1px solid #e5e5e5;
		}

		.close {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}

		.checkbox-group {
			display: flex;
			flex-wrap: wrap;
			padding: 30rpx;
			gap: 24rpx;

			.checkbox {
				width: calc(33.33% - 18rpx);
				padding: 20rpx 0;
				text-align: center;
				border-bottom: 1px solid #e5e5e5;
				background: #FFF6F8;
				border-radius: 38rpx 38rpx 38rpx 38rpx;
			}

			.select {
				background: #FF8A9B;
				color: #FFFFFF;
			}
		}
	}
</style>
